<template>
  <div class="notification-container">
    <TransitionGroup
      name="notification-list"
      tag="div"
      class="notification-list"
    >
      <NotificationToast
        v-for="notification in notifications"
        :key="notification.id"
        :type="notification.type"
        :title="notification.title"
        :message="notification.message"
        :duration="0"
        :closable="notification.closable"
        @close="removeNotification(notification.id)"
      />
    </TransitionGroup>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import NotificationToast from './NotificationToast.vue'
import { getNotificationState, removeNotification } from '../services/notification'

/**
 * 通知容器组件
 * 用于渲染所有活跃的通知
 */

const notificationState = getNotificationState()

/**
 * 获取当前所有通知
 */
const notifications = computed(() => notificationState.notifications)
</script>

<style scoped>
.notification-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 9999;
}

.notification-list {
  position: absolute;
  top: 20px;
  left: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: auto;
}

/* 列表动画 */
.notification-list-move,
.notification-list-enter-active,
.notification-list-leave-active {
  transition: all 0.3s ease;
}

.notification-list-enter-from {
  opacity: 0;
  transform: translateX(-100%);
}

.notification-list-leave-to {
  opacity: 0;
  transform: translateX(-100%);
}

.notification-list-leave-active {
  position: absolute;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .notification-list {
    left: 10px;
    right: 10px;
    top: 10px;
  }
}
</style>